<template>
	<main-content
		:classType="'wrapInnerWOC'"
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="searchForm"
				:model="queryData"
				size="medium"
				inline
				@submit.native.prevent
			>
				<el-form-item
					:label="$t('agent.user_name') + ':'"
					prop="venueName"
				>
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.username"
						clearable
						size="medium"
						:maxlength="12"
						style="width: 200px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('agent.user_role_name') + ':'"
					prop="status"
				>
					<el-select
						v-model="queryData.roleId"
						clearable
						:placeholder="$t('common.all')"
						style="width:200px"
						:popper-append-to-body="false"
					>
						<el-option key="all" :value="undefined">
							{{ $t('common.all') }}
						</el-option>
						<el-option
							v-for="item in roleList"
							:key="item.id"
							:label="item.roleName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('agent.login_status') + ':'"
					prop="status"
				>
					<el-select
						v-model="queryData.status"
						clearable
						:placeholder="$t('common.all')"
						style="width:200px"
						:popper-append-to-body="false"
					>
						<el-option key="all" :value="undefined">
							{{ $t('common.all') }}
						</el-option>
						<el-option
							v-for="item in statusList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="snap-form-item">
					<el-select
						v-model="queryData.timeType"
						size="medium"
						style="width:130px"
					>
						<el-option
							v-for="item in filterTimeTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
					<el-date-picker
						v-model="queryData.registerTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_time')"
						:end-placeholder="$t('common.end_time')"
						align="right"
						clearable
						:default-time="defaultTime"
						value-format="timestamp"
					></el-date-picker>
				</el-form-item>
				<el-form-item style="margin-left: 30px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>

		<template slot="content">
			<div
				v-if="activeL"
				style="
                height: 350px;
                line-height: 350px;
                text-align: center;
                font-size: 28px;
            "
			>
				<i class="el-icon-loading"></i>
			</div>
			<div v-else style="width: 100%">
				<el-table
					border
					size="mini"
					class="small-size-table"
					:data="dataList"
					:header-row-style="{ height: '24px', lineHeight: '24px' }"
					style="margin: 10px 0 30px 0; z-index: 0"
					:header-cell-style="getRowClass"
					highlight-current-row
					:max-height="tableHeight"
				>
					<el-table-column
						prop="ipAttribution"
						align="center"
						:label="'助理账号'"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.username || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="ipAttribution"
						align="center"
						:label="'账号角色'"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.roleName || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						prop="loginTime"
						:label="'创建时间'"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.createdAt || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						prop="loginTime"
						:label="'最后登录时间'"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.loginTime || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="loginStatus"
						align="center"
						:label="'登录状态'"
						width="180"
					>
						<template slot-scope="scope">
							<!-- <span v-if="scope.row.status === '1'">
								{{ typeFilter(scope.row.status, 'status') }}
							</span>
							<span v-else class="redColor">
								{{ typeFilter(scope.row.status, 'status') }}
							</span> -->
							<el-tag v-if="scope.row.status == 1" type="success">
								{{ $t('common.start_up') }}
							</el-tag>
							<el-tag v-else type="danger">
								{{ $t('common.disabled') }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column
						prop="checkType"
						align="center"
						:label="'安全校验'"
						width="180"
					>
						<template slot-scope="scope">
							{{ scope.row.checkType === 1 ? checkTypeKeyStr : '无校验'  }}
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					class="pageValue"
					:current-page.sync="page"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="size"
					:page-sizes="[10, 20, 50, 100, 200]"
					:total="total"
					:pager-count="9"
					style="float: right; padding-top: 10px"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
			<el-divider></el-divider>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import MainContent from '@/components/MainContent/index.vue'
import dayjs from 'dayjs'
const start = () =>
	dayjs()
		.startOf('day')
		.valueOf()

const end = () =>
	dayjs()
		.endOf('day')
		.valueOf()
export default {
	components: {
		MainContent
	},
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => ({}) },
		lonRecord: { type: Object, default: () => ({}) }
	},
	data() {
		return {
			statusList: [
				{
					code: 1,
					description: this.$t('common.start_up')
				},
				{
					code: 0,
					description: this.$t('common.disabled')
				}
			],
			tableHeight: 480,
			roleList: [],
			otherDependenComponents: ['wrapInnerTab'],
			operateTime: [start(), end()],
			activeL: false,
			page: 1,
			total: 0,
			checkTypeKeyStr: '-',
			queryData: {
				timeType: 1
			},
			// 查询时间类型
			filterTimeTypeArr: [
				{
					description: '创建时间',
					code: 1
				},
				{
					description: '最后登录时间',
					code: 2
				}
			],
			size: 100,
			dataList: []
		}
	},
	computed: {},
	watch: {
		parentData: {
			handler() {
				this.refresh()
			},
			deep: true
		},
		lonRecord: {
			handler(newV) {
				if (newV.totalRecord) {
					this.total = newV.totalRecord
					this.dataList = newV.record
				} else {
					this.total = 0
					this.dataList = []
				}
			},
			deep: true
		}
	},
	created() {
		this.loadRoleList()
		this.refresh()
		this.getValidateKeyType()
	},
	mounted() {},
	methods: {
		async getValidateKeyType() {
			this.checkTypeKeyStr = this.$t('common.google_key')
			// await this.$api
			// 	.getSystemValidateKeyType()
			// 	.then((res) => {
			// 		const validateKeyType = res?.data?.verifyCodeType || 1
			// 		if (validateKeyType === 3) {
			// 			// 海月盾密钥
			// 			this.checkTypeKeyStr = this.$t('common.seamoon_key')
			// 		} else {
			// 			// 谷歌密钥
			// 			this.checkTypeKeyStr = this.$t('common.google_key')
			// 		}
			// 	})
			// .catch(() => {})
		},
		loadRoleList() {
			const params = {
				merchantId: this.parentData.merchantId,
				userId: this.parentData.id,
				pageNum: 1,
				pageSize: 9999
				// merchantId: 1,
				// userId: 1
			}
			this.$api.getProxySubRole4Page(params).then((res) => {
				if (res?.code === 200) {
					this.roleList = res?.data?.record || []
				} else {
					this.roleList = []
				}
			})
		},
		search() {
			this.page = 1
			this.loadProxySubAccount4Page()
		},
		// 登录日志查询
		loadProxySubAccount4Page(val) {
			this.activeL = true
			this.dataList = []
			const create = this.queryData.registerTime || []
			const [startTime, endTime] = create
			const params = {
				merchantId: this.parentData.merchantId,
				userId: this.parentData.id,
				status: this.queryData.status,
				roleId: this.queryData.roleId || undefined,
				username: this.queryData.username,
				pageNum: this.page,
				pageSize: this.size,
				createdAtBegin:
					startTime && this.queryData.timeType === 1
						? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
						: undefined,
				createdAtEnd:
					endTime && this.queryData.timeType === 1
						? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
						: undefined,
				loginTimeBegin:
					startTime && this.queryData.timeType === 2
						? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
						: undefined,
				loginTimeEnd:
					endTime && this.queryData.timeType === 2
						? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
						: undefined
			}
			this.$api.getProxySubAccount4Page(params).then((res) => {
				if (res?.code === 200) {
					this.dataList = res?.data?.record || []
					this.total = res?.data?.totalRecord || 0
					this.activeL = false
				} else {
					this.total = 0
					this.dataList = []
					this.activeL = false
				}
			})
		},
		refresh() {
			this.page = 1
			this.size = 100
			this.loadProxySubAccount4Page(this.parentData.userName)
		},
		reset() {
			this.queryData = {
				timeType: 1,
				registerTime: []
			}
			this.loadProxySubAccount4Page()
		},
		handleCurrentChange(val) {
			this.page = val
			if (this.parentData.userName !== null) {
				this.loadProxySubAccount4Page(this.parentData.userName)
			}
		},
		handleSizeChange(val) {
			this.page = 1
			this.size = val
			if (this.parentData.userName !== null) {
				this.loadProxySubAccount4Page(this.parentData.userName)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
#basicInformation {
	font-size: 14px;
	line-height: 40px;
	min-height: 400px;
	padding-top: 10px;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.backgroundTitelBox {
	line-height: 40px;
	width: 188px;
	height: 40px;
	text-align: center;
	background: #000;
	color: rgb(255, 255, 255);
}
.refrestBox {
	text-align: center;
}
.clear {
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
}
.pageValue {
	text-align: right;
}
</style>
